import { useEffect, useState } from "react";
import React from 'react';
import { List } from "./list"
import { Project } from "../../types/Project";
import { SearchPanel } from "./search-panel"
import { cleanObject, useDebounce } from "utils";
import * as qs from 'qs';
import { useHttp } from "utils/http";
import styled from "@emotion/styled";
import { Button, Typography } from "antd";
import { useAsync } from "utils/use-async";
import { useProjects } from "utils/project";
import { useUsers } from "utils/user";
import { ButtonNoPadding, ErrorBox, Row, useDocumentTitle } from "components/lib";
import { useUrlQueryParam } from "utils/url";
import { useProjectModal, useProjectsSearchParams } from "./util";


export const ProjectListScreen = () => {
  useDocumentTitle('项目列表', false)
  
  const [param, setParam] = useProjectsSearchParams()
  
  const {isLoading, error, data: list} = useProjects(useDebounce(param, 200));
  const {data: users} = useUsers();

  const {open} = useProjectModal();



  return <Container>
    <Row between>
      <h1>项目列表</h1>
      <Button type={'link'} onClick={open}>创建项目</Button>
    </Row>
    <SearchPanel users={users || []} param={param} setParam={setParam}/>
    <ErrorBox error={error}/>
    <List  users={users || []} dataSource={list || []} />
  </Container>
};

ProjectListScreen.whyDidYouRender = false;

const Container = styled.div`
  padding: 3.2rem
`